import React, {MutableRefObject, useEffect, useState, useRef} from 'react';
import {View, Image} from 'react-native';
import {Navigation, NavigationFunctionComponent} from 'react-native-navigation';
import {
  useNavigationComponentDidAppear,
  useNavigationComponentDidDisappear,
} from 'react-native-navigation-hooks';
import styled from 'styled-components/native';
import QRCode from 'react-native-qrcode-svg';
import {Text, Flex, Button, Focusable} from '../components';
import {login_qr_key, login_qr_create, login_qr_check} from '../apis';
import {observer} from 'mobx-react';
import {useGlobal, usePlayer} from '../hooks/useStores';

const QrGuide = styled.Image`
  max-height: 80%;
  height: 300px;
  width: 150px;
`;

const Avatar = styled(Image)`
  height: 120px;
  width: 120px;
  border-radius: 120px;
  overflow: hidden;
`;

interface Props {}

const Login: NavigationFunctionComponent<Props> = observer(({componentId}) => {
  const [v, setV] = useState(1);
  const [qrurl, setQrurl] = useState('');
  const [key, setKey] = useState('');
  const timer: MutableRefObject<any> = useRef<any>();

  const {loadUserInfo, logined, profile, logout}: any = useGlobal();
  const {loadFm, clearFm}: any = usePlayer();

  useNavigationComponentDidDisappear(() => {
    console.log('useNavigationComponentDidDisappear');
    timer.current && clearInterval(timer.current);
  }, componentId);

  useNavigationComponentDidAppear(() => {
    console.log('useNavigationComponentDidDisappear');
    if (qrurl && key) {
      timer.current && clearInterval(timer.current);
      checkLogin();
    }
  }, componentId);

  useEffect(() => {
    timer.current && clearInterval(timer.current);
    if (!logined) {
      loadQrocde();
    }
  }, [v, logined]);

  const loadQrocde = async () => {
    try {
      global.showLoading({
        title: '加载二维码中...',
      });

      const {
        data: {unikey},
      }: any = await login_qr_key();

      setKey(unikey);
      if (unikey) {
        const {
          data: {qrurl: url},
        }: any = await login_qr_create(unikey);
        if (url) {
          setQrurl(url);
        }
      }
      global.hideLoading();
    } catch (error) {
      global.hideLoading();
    }
  };

  const checkLogin = () => {
    console.log('start checkLogin');
    timer.current = setInterval(async () => {
      const {code, message}: any = await login_qr_check(key);
      console.log(code, message);

      if (code === 800) {
        global.showToast({
          title: '二维码已过期,请重新获取',
          icon: 'none',
        });
        setV(v + 1);
      }

      if (code === 803) {
        timer.current && clearInterval(timer.current);
        await global.showLoading({
          title: '登录中...',
        });
        await loadUserInfo();
        await global.hideLoading();
        await global.showToast({
          title: '登录成功',
          icon: 'success',
        });
        clearFm();
        await loadFm();
        Navigation.pop(componentId);
      }
    }, 1500);
  };

  useEffect(() => {
    if (qrurl) {
      checkLogin();
    }
    return () => {
      timer.current && clearInterval(timer.current);
    };
  }, [qrurl]);

  return (
    <View>
      {!logined ? (
        <Flex
          justify="space-evenly"
          align="center"
          style={{width: '100%', height: '100%'}}>
          <QrGuide
            source={require('../assets/qr_guide.png')}
            resizeMode="contain"
          />

          <Flex direction="column" align="center">
            <View
              style={{marginBottom: 24, overflow: 'hidden', borderRadius: 10}}>
              {qrurl ? (
                <QRCode value={qrurl} size={200} quietZone={6} />
              ) : (
                <View />
              )}
            </View>

            <View>
              <Text>
                请使用
                <Text color="#e70625">网易云音乐</Text>APP
              </Text>
            </View>
            <View>
              <Text>扫码登录</Text>
            </View>
          </Flex>
        </Flex>
      ) : (
        <Flex
          align="center"
          justify="center"
          direction="column"
          style={{width: '100%', height: '100%'}}>
          {/* <Avatar> */}
          <Avatar source={{uri: profile?.avatarUrl}} />
          <Text size={32} style={{marginTop: 24, marginBottom: 54}}>
            {profile?.nickname}
          </Text>

          <Focusable onPress={logout} radius={30}>
            <Button width={220}>
              <Text>退出登录</Text>
            </Button>
          </Focusable>
        </Flex>
      )}
    </View>
  );
});

Login.options = {
  topBar: {
    title: {
      text: '登录',
    },
  },
};
export default Login;
